<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../js/localstorage.js"></script>
     <link rel="stylesheet" type="text/css" href="../css/zTreeStyle.css"> 
    <link rel="stylesheet" href="../css/Stylesheet.css">
     <script type="text/javascript" src="../js/jquery.js"></script> 
     <script type="text/javascript" src="../js/jquery.ztree.core.js"></script> 
    <style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
        font-size: 12px;
    }
    th {
        text-align: center;
    }

    button.button,tr td button {
        padding: 2px 5px;
        margin: 0px 3px;
        background: #009bce;
        border-radius: 4px;
        border: 1px;
        color: #fff;
    }
   		#tree{
            width: 140px;display: none;position: absolute;background: #fff;
        }
        #list{
            position: absolute;right: 0px;margin-top: 20px;width: 200px;background: #eaeaea;
        }
    </style>

     <script type="text/javascript">
        // tree节点点击事件  name为这个节点的值
        function zTreeOnClick(event, treeId, treeNode) {
            $("#site").val(treeNode.name);
        };
        var setting = {
            callback: {
                onClick: zTreeOnClick
            }
        };
        var zNodes =[
            { name:"香港", open:true,
                children: [
                    { name:"九龙区",open:true,
                        children: [
                            { name:"场所A" },
                            { name:"场所B" },
                            { name:"场所C" }
                        ]},
                    { name:"旺角区",open:true,
                            children: [
                            { name:"场所A" },
                            { name:"场所B" },
                            { name:"场所C" }
                        ]},
                    { name:"西贡区",open:true,
                            children: [
                            { name:"场所A" },
                            { name:"场所B" },
                            { name:"场所C" }
                        ]},
                    { name:"油尖旺区",open:true,
                           children: [
                            { name:"场所A" },
                            { name:"场所B" },
                            { name:"场所C" }
                        ]},
                    { name:"深水埗区",open:true,
                           children: [
                            { name:"场所A" },
                            { name:"场所B" },
                            { name:"场所C" }
                           ]}
                ]}
        ];
    $(function(){
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    })
    </script>
    <script type="text/javascript">
        $(function(){
        
            $("div").click(function(e){
                var id = $(this).attr("id");
                if(id == "aaa"){
                    return false;
                }else if(id == "tree"){
                    return false;
                }else{
                    $("#tree").slideUp(300);
                }
                return false;
            })

            $("#site").click(function(e){
                $("#tree").slideDown(300);
            })

            // $("#site").blur(function(e){
            //  $("#tree").slideUp(300);
            // })
            $("#tree").hover(function(){},function(){
                $("#tree").slideUp(300);
                // $("#site").blur();
            })
        })
    </script> 
</head>

<body>
    <div class="pageheader">
        <div class="clear"></div>
        <!-- <img src="/Icons/changsuo.png" alt="Customers" title="Customers"> -->
        <h1><script>document.write(language.end_of_day_loan_item)</script></h1>
    </div>
    <div class="listFilter">
        <h2><script>document.write(language.Filter)</script><span class="tooltip" style="display: none;"><em>(筛选下表)</em></span></h2>
        <!-- <a href="#" class="tooltoggle">显示/隐藏工具提示</a> -->
        <div class="divider"></div>
        <table width="100%;">
            <tbody>
                <tr>
                    <td class="FormLabel" style="width: auto;">
                        <!-- <script>document.write(language.Place_name)</script>：
                        <div style="display: inline-block; " id="aaa">
                            <input name="site" type="text" id="site" placeholder="Please choose site">
                            <div id="tree">
                                <ul id="treeDemo" class="ztree"></ul></ul>
                            </div>
                        </div> -->

                        <script>
                        document.write(language.choiceSite)
                        </script>：
                        <div style="display: inline-block; " id="aaa">
                            <input name="site" type="text" id="site" placeholder="Please choose site">
                            <div id="tree">
                                <ul id="treeDemo" class="ztree"></ul></ul>
                            </div>
                        </div> 
                        <script>
                        document.write(language.Person_in_charge)
                        </script>：
                        <input name="ctl00$ContentPlaceHolder1$txtPostcode" type="text" id="ctl00_ContentPlaceHolder1_txtPostcode">
                        <button class='button'><script>document.write(language.Filter)</script></button>
                        <button class='button'><script>document.write(language.remove)</script></button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="formSubmit">
           <!-- <button class='button'><script>document.write(language.Filter)</script></button> -->
            <!-- <button class='button'><script>document.write(language.remove)</script></button> -->
        </div>
    </div>
    <div class="reportResults">
        <table class="list_table" id="ltReport_list" width="100%" cellspacing="0" style="text-align: center;">
            <thead>
                <tr>
                	<th>
                        <script>
                        document.write(language.choiceSite)
                        </script>
                    </th>
                    <th>
                        <script>
                        document.write(language.project)
                        </script>
                    </th>
                    <th>
                        <script>
                        document.write(language.code)
                        </script>
                    </th>
                    <th>
                        <script>
                        document.write(language.deposit)
                        </script>
                    </th>
                    <th>
                        <script>
                        document.write(language.fangke_yufang)
                        </script>
                    </th>
                    <th>
                        <script>
                        document.write(language.guest_mobile)
                        </script>
                    </th>
                    <th>
                        <script>
                        document.write(language.visit_time)
                        </script>
                    </th>
                    <th>
                        <script>
                        document.write(language.Interviewee)
                        </script>
                    </th>
                    <th>
                        <script>
                        document.write(language.host_mobile)
                        </script>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr class="odd_row">
                	<td>Site A</td>
                    <td>Umbrella</td>
                    <td>A808686</td>
                    <td>$50</td>
                    <td>tom</td>
                    <td>13133333333</td>
                    <td>10:00</td>
                    <td>bob</td>
                    <td>13111111111</td>
                </tr>
                <tr class="even_row">
                	<td>Site A</td>
                    <td>Umbrella</td>
                    <td>A808686</td>
                    <td>$50</td>
                    <td>tom</td>
                    <td>13133333333</td>
                    <td>13:00</td>
                    <td>bob</td>
                    <td>13111111111</td>
                </tr>
                <tr class="odd_row">
                	<td>Site A</td>
                    <td>Umbrella</td>
                    <td>A808686</td>
                    <td>$50</td>
                    <td>tom</td>
                    <td>13133333333</td>
                    <td>12:00</td>
                    <td>bob</td>
                    <td>13111111111</td>
                </tr>
                <tr class="even_row">
                	<td>Site A</td>
                    <td>Umbrella</td>
                    <td>A808686</td>
                    <td>$50</td>
                    <td>tom</td>
                    <td>13133333333</td>
                    <td>14:00</td>
                    <td>bob</td>
                    <td>13111111111</td>
                </tr>
                <tr class="odd_row">
                	<td>Site A</td>
                    <td>Umbrella</td>
                    <td>A808686</td>
                    <td>$50</td>
                    <td>tom</td>
                    <td>13133333333</td>
                    <td>14:00</td>
                    <td>bob</td>
                    <td>13111111111</td>
                </tr>
            </tbody>
        </table>
        <div class="ExportLinks">
            <a href="#"><script>document.write(language.Export_all_to)</script> Excel</a>
            <a href="#"><script>document.write(language.Export_this_page_to)</script> Excel</a>
            <a href="#"><script>document.write(language.Export_this_page_to)</script> PDF</a>
            <a href="#"><script>document.write(language.Export_all_to)</script> PDF</a>
                <a href="#"><script>document.write(language.send)</script> <script>document.write(language.email)</script></a>
        </div>
        <div class="WhereToLinks"></div>
    </div>
</body>

</html>